<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小车遥控器</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
    <link rel="stylesheet" href="./css/controller.css">
    <style>
        .video-container {
            text-align: center;
            margin: 20px 0;
        }
        
        #video-stream {
            max-width: 100%;
            height: auto;
            border: 2px solid #009688;
            border-radius: 5px;
            background-color: #000;
        }
        
        .video-controls {
            margin: 10px 0;
        }
        
        .video-btn {
            background-color: #009688;
            color: white;
            border: none;
            padding: 10px 20px;
            margin: 5px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
        }
        
        .video-btn:hover {
            background-color: #00796b;
        }
        
        .video-btn:disabled {
            background-color: #b2dfdb;
            cursor: not-allowed;
        }
        
        .video-status {
            margin: 10px 0;
            padding: 10px;
            background-color: #e0f2f1;
            border-radius: 5px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>小车遥控器</h1>
        
        <!-- 视频显示区域 -->
        <div class="control-section">
            <h2>实时视频</h2>
            <div class="video-container">
                <img id="video-stream" src="" alt="视频流加载中..." onerror="handleVideoError()">
                <div class="video-status" id="video-status">视频状态: 未启动</div>
                <div class="video-controls">
                    <button id="start-video" class="video-btn" onclick="startVideo()">开启视频</button>
                    <button id="stop-video" class="video-btn" onclick="stopVideo()" disabled>停止视频</button>
                </div>
            </div>
        </div>
        
        <!-- 基本移动控制 -->
        <div class="control-section">
            <h2>基本移动控制</h2>
            <div class="movement-controls">
                <button class="btn forward" onmousedown="sendCommand('forward')" onmouseup="sendCommand('stop')" ontouchstart="sendCommand('forward')" ontouchend="sendCommand('stop')">前进</button>
                <button class="btn move-left" onmousedown="sendCommand('move_left')" onmouseup="sendCommand('stop')" ontouchstart="sendCommand('move_left')" ontouchend="sendCommand('stop')">左移</button>
                <button class="btn move-right" onmousedown="sendCommand('move_right')" onmouseup="sendCommand('stop')" ontouchstart="sendCommand('move_right')" ontouchend="sendCommand('stop')">右移</button>
                <button class="btn left" onmousedown="sendCommand('turn_left')" onmouseup="sendCommand('stop')" ontouchstart="sendCommand('turn_left')" ontouchend="sendCommand('stop')">左转</button>
                <button class="btn stop" onclick="sendCommand('stop')">停止</button>
                <button class="btn right" onmousedown="sendCommand('turn_right')" onmouseup="sendCommand('stop')" ontouchstart="sendCommand('turn_right')" ontouchend="sendCommand('stop')">右转</button>
                <button class="btn turn-left" onmousedown="sendCommand('turn_left')" onmouseup="sendCommand('stop')" ontouchstart="sendCommand('turn_left')" ontouchend="sendCommand('stop')">原地左转</button>
                <button class="btn backward" onmousedown="sendCommand('backward')" onmouseup="sendCommand('stop')" ontouchstart="sendCommand('backward')" ontouchend="sendCommand('stop')">后退</button>
                <button class="btn turn-right" onmousedown="sendCommand('turn_right')" onmouseup="sendCommand('stop')" ontouchstart="sendCommand('turn_right')" ontouchend="sendCommand('stop')">原地右转</button>
            </div>
        </div>
        
        <!-- 斜向移动控制 -->
        <div class="control-section">
            <h2>斜向移动控制</h2>
            <div class="btn-group">
                <button class="btn btn-small forward-left" onmousedown="sendCommand('forward_left')" onmouseup="sendCommand('stop')" ontouchstart="sendCommand('forward_left')" ontouchend="sendCommand('stop')">前左斜</button>
                <button class="btn btn-small forward-right" onmousedown="sendCommand('forward_right')" onmouseup="sendCommand('stop')" ontouchstart="sendCommand('forward_right')" ontouchend="sendCommand('stop')">前右斜</button>
                <button class="btn btn-small backward-left" onmousedown="sendCommand('backward_left')" onmouseup="sendCommand('stop')" ontouchstart="sendCommand('backward_left')" ontouchend="sendCommand('stop')">后左斜</button>
                <button class="btn btn-small backward-right" onmousedown="sendCommand('backward_right')" onmouseup="sendCommand('stop')" ontouchstart="sendCommand('backward_right')" ontouchend="sendCommand('stop')">后右斜</button>
            </div>
        </div>
        
        <!-- 舵机控制 -->
        <div class="control-section">
            <h2>舵机控制</h2>
            <div class="servo-control">
                <label for="servo-channel">舵机通道 (0-15):</label>
                <input type="number" id="servo-channel" class="servo-input" min="0" max="15" value="0">
                <label for="servo-angle">舵机角度 (0-180):</label>
                <input type="range" id="servo-angle" class="servo-input" min="0" max="180" value="90" oninput="updateAngleDisplay(this.value)">
                <span id="angle-display">90°</span>
                <button class="btn" style="background-color: #009688;" onclick="sendServoCommand()">设置舵机角度</button>
            </div>
        </div>
        
        <!-- 速度控制 -->
        <div class="control-section">
            <h2>速度控制</h2>
            <div class="servo-control">
                <label for="speed-control">速度 (0-100):</label>
                <input type="range" id="speed-control" class="servo-input" min="0" max="100" value="50" oninput="updateSpeedDisplay(this.value)">
                <span id="speed-display">50%</span>
            </div>
        </div>
        
        <div class="status" id="status">
            状态: 待机
        </div>
    </div>

    <script>
        // 创建SocketIO连接
        const socket = io();
        const videoStream = document.getElementById('video-stream');
        const startVideoBtn = document.getElementById('start-video');
        const stopVideoBtn = document.getElementById('stop-video');
        const videoStatus = document.getElementById('video-status');
        
        // 连接打开时的处理
        socket.on('connect', function() {
            document.getElementById('status').innerHTML = '状态: 已连接';
        });
        
        // 连接关闭时的处理
        socket.on('disconnect', function() {
            document.getElementById('status').innerHTML = '状态: 连接已断开';
        });
        
        // 更新角度显示
        function updateAngleDisplay(value) {
            document.getElementById('angle-display').textContent = value + '°';
        }
        
        // 更新速度显示
        function updateSpeedDisplay(value) {
            document.getElementById('speed-display').textContent = value + '%';
        }
        
        // 发送舵机命令
        function sendServoCommand() {
            const channel = document.getElementById('servo-channel').value;
            const angle = document.getElementById('servo-angle').value;
            const command = {
                type: 'servo',
                channel: parseInt(channel),
                angle: parseInt(angle)
            };
            socket.emit('command', command);
            document.getElementById('status').innerHTML = '状态: 设置舵机通道 ' + channel + ' 角度 ' + angle + '°';
        }
        
        // 发送命令到服务器
        function sendCommand(command) {
            const speed = document.getElementById('speed-control').value;
            const commandObj = {
                type: 'movement',
                command: command,
                speed: parseInt(speed)
            };
            
            if (socket.connected) {
                socket.emit('command', commandObj);
                document.getElementById('status').innerHTML = '状态: 发送命令 - ' + command + ' 速度: ' + speed + '%';
            } else {
                document.getElementById('status').innerHTML = '状态: 未连接，无法发送命令';
            }
        }
        
        // 开启视频
        function startVideo() {
            videoStatus.innerHTML = '视频状态: 正在启动...';
            
            // 发送命令到服务器
            const command = {
                type: 'camera',
                action: 'start'
            };
            socket.emit('command', command);
            
            // 设置视频流源
            videoStream.src = "/video_feed?" + new Date().getTime(); // 添加时间戳避免缓存
            
            // 更新按钮状态
            startVideoBtn.disabled = true;
            stopVideoBtn.disabled = false;
            
            document.getElementById('status').innerHTML = '状态: 请求视频流...';
        }
        
        // 关闭视频
        function stopVideo() {
            // 清除视频流源
            videoStream.src = "";
            
            // 更新按钮状态
            startVideoBtn.disabled = false;
            stopVideoBtn.disabled = true;
            
            // 更新状态显示
            videoStatus.innerHTML = '视频状态: 已停止';
            
            // 发送命令到服务器
            const command = {
                type: 'camera',
                action: 'stop'
            };
            socket.emit('command', command);
            document.getElementById('status').innerHTML = '状态: 视频已停止';
        }
        
        // 处理视频错误
        function handleVideoError() {
            videoStatus.innerHTML = '视频状态: 加载失败，请检查摄像头连接';
            document.getElementById('status').innerHTML = '状态: 视频流加载失败';
        }
        
        // 禁止页面滚动和缩放
        document.addEventListener('touchmove', function(e) {
            e.preventDefault();
        }, { passive: false });
        
        // 禁止双击缩放
        let lastTouchEnd = 0;
        document.addEventListener('touchend', function (event) {
            const now = (new Date()).getTime();
            if (now - lastTouchEnd <= 300) {
                event.preventDefault();
            }
            lastTouchEnd = now;
        }, false);
    </script>
</body>
</html>